import React, { useCallback } from 'react'
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
  MiniMap,
  Controls,
  Background,
  Handle,
  Position,
} from '@xyflow/react'
export default function MyCustomerNode({ data }) {
  const onClick = useCallback(() => {
    // console.log(evt.target.value)
    console.log('按下了自定义组件中的button按钮')
  }, [])
  return (
    <div style={{ padding: 10, border: '1px solid red' }}>
      <Handle id="topHandle" position={Position.Top} type="target" />
      <Handle id="leftHandle" position={Position.Left} type="target" />
      <span>自定义组件</span>
      <button onClick={onClick}>按钮</button>
      <Handle id="rightHandle" position={Position.Right} type="source" />
      <Handle id="bottomHandle" position={Position.Bottom} type="source" />
    </div>
  )
}
